
<script setup>

import { ref, reactive, onBeforeMount, watch } from 'vue'

let calender = ref(new Date())
let popupbox = ref(false)
let textareaValue = ref('')
let years = ref(calender.value.getFullYear())
let mon = ref(calender.value.getMonth() + 1)
let day = ref(calender.value.getDate())
let value = ref(years.value + '年')
let value1 = ref(mon.value + '月')
let options = reactive([
    {
        value: '2020年',
        label: '2020年',
    },
    {
        value: '2021年',
        label: '2021年',
    },
    {
        value: '2022年',
        label: '2022年',
    },
    {
        value: '2023年',
        label: '2023年',
    },
])

let options1 = reactive([
    {
        value: '1 月',
        label: '1月',
    },
    {
        value: '2 月',
        label: '2月',
    },
    {
        value: '3 月',
        label: '3月',
    },
    {
        value: '4 月',
        label: '4月',
    },
    {
        value: '5 月',
        label: '5月',
    },
    {
        value: '6 月',
        label: '6月',
    },
    {
        value: '7 月',
        label: '7月',
    },
    {
        value: '8 月',
        label: '8月',
    },
    {
        value: '9 月',
        label: '9月',
    },
    {
        value: '10 月',
        label: '10月',
    },
    {
        value: '11 月',
        label: '11月',
    },
    {
        value: '12 月',
        label: '12月',
    },
])
//根据当前年份添加未来两年，保存以前的年份
let oldoptions = localStorage.getItem('yaer')
if (oldoptions) {
    let jsonOld = JSON.parse(oldoptions)
    options = reactive(jsonOld)
}
let dateYaer = new Date().toLocaleString().split('/')[0]
if ((Number(dateYaer) + 2) + '年' != options[options.length - 1].value) {
    if (dateYaer + '年' == options[options.length - 2].value) {
        options.push({
            value: (Number(dateYaer) + 2) + '年',
            label: (Number(dateYaer) + 2) + '年',
        })
    } else {
        for (let i = 1; i <= 2; i++) {
            options.push({
                value: (Number(dateYaer) + i) + '年',
                label: (Number(dateYaer) + i) + '年',
            })
        }
    }
    localStorage.setItem('yaer', JSON.stringify(options))
}


//工作日设置备注数据
let beizhu = reactive([])
options.forEach((item, index) => {
    let id = beizhu.length + 1
    let obj = {}
    obj.id = id
    obj.year = item.value
    obj.month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    if (parseInt(item.value) % 4 == 0 && parseInt(item.value) % 100 != 0 || parseInt(item.value) % 400 == 0) {
        obj.day = [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]]
        obj.content = [['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']]
    } else {
        obj.day = [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]]
        obj.content = [['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']]
    }
    beizhu.push(obj)
})
let beizhuA = localStorage.getItem('beizhu')
if (beizhuA) {
    let beizhuB = JSON.parse(beizhuA)
    beizhu = reactive(beizhuB)
} else {
    localStorage.setItem('beizhu', JSON.stringify(beizhu))
}

//天数
let loop = {
    day: '',
    content: '',
}
beizhu.forEach(item => {
    if (item.year == value.value) {
        item.month.forEach((mon, index) => {
            if (mon == parseInt(value1.value)) {
                loop.day = item.day[index]
                loop.content = item.content[index]
            }
        })
    }
})

// 表格显示一行七个
let loopData = reactive([
    {
        day: loop.day.slice(0, 7),
        content: loop.content.slice(0, 7)
    },
    {
        day: loop.day.slice(7, 14),
        content: loop.content.slice(7, 14)
    },
    {
        day: loop.day.slice(14, 21),
        content: loop.content.slice(14, 21)
    },
    {
        day: loop.day.slice(21, 28),
        content: loop.content.slice(21, 28)
    },
    {
        day: loop.day.slice(28, 31),
        content: loop.content.slice(28, 31)
    },
])
//监听年份修改
watch(value, (newV) => {
    beizhu.forEach(item => {
        if (item.year == newV) {
            item.month.forEach((mon, index) => {
                if (mon == parseInt(value1.value)) {
                    loop.day = item.day[index]
                    loop.content = item.content[index]
                }
            })
        }
    })
    loopData = reactive([
        {
            day: loop.day.slice(0, 7),
            content: loop.content.slice(0, 7)
        },
        {
            day: loop.day.slice(7, 14),
            content: loop.content.slice(7, 14)
        },
        {
            day: loop.day.slice(14, 21),
            content: loop.content.slice(14, 21)
        },
        {
            day: loop.day.slice(21, 28),
            content: loop.content.slice(21, 28)
        },
        {
            day: loop.day.slice(28, 31),
            content: loop.content.slice(28, 31)
        },
    ])
})
//监听月份修改
watch(value1, (newV) => {
    beizhu.forEach(item => {
        if (item.year == value.value) {
            item.month.forEach((mon, index) => {
                if (mon == parseInt(newV)) {
                    loop.day = item.day[index]
                    loop.content = item.content[index]
                }
            })
        }
    })
    loopData = reactive([
        {
            day: loop.day.slice(0, 7),
            content: loop.content.slice(0, 7)
        },
        {
            day: loop.day.slice(7, 14),
            content: loop.content.slice(7, 14)
        },
        {
            day: loop.day.slice(14, 21),
            content: loop.content.slice(14, 21)
        },
        {
            day: loop.day.slice(21, 28),
            content: loop.content.slice(21, 28)
        },
        {
            day: loop.day.slice(28, 31),
            content: loop.content.slice(28, 31)
        },
    ])
})

//弹窗
let mon1 = ref('')
let PopUpBox = (data) => {
    popupbox.value = true
    mon1.value = data
    beizhu.forEach(item => {
        if (item.year == value.value) {
            item.month.forEach((mon, index) => {
                if (mon == parseInt(value1.value)) {
                    item.day[index].forEach((numMon, indexz) => {
                        if (numMon == mon1.value)
                            textareaValue.value = item.content[index][indexz]
                    })
                }
            })
        }
    })
}
//弹窗确认
let affirme = () => {
    let newtextareaValue = textareaValue.value
    loopData.forEach((item) => {
        item.day.forEach((itemz, index) => {
            if (itemz == mon1.value) {
                item.content[index] = newtextareaValue
            }
        })
    })
    beizhu.forEach(item => {
        if (item.year == value.value) {
            item.month.forEach((mon, index) => {
                if (mon == parseInt(value1.value)) {
                    item.day[index].forEach((numMon, indexz) => {
                        if (numMon == mon1.value)
                            item.content[index][indexz] = newtextareaValue
                    })
                }
            })
        }
    })
    popupbox.value = false
    textareaValue.value = ''
    let username = localStorage.getItem("username")
    localStorage.setItem('beizhu', JSON.stringify(beizhu))
    localStorage.setItem("usernameB", username)
}


</script>

<template>
    <div class="box_boxz">
        <div class="workingday">
            <div class="calendar">
                <div class="el-calendar">
                    <div class="el-calendar__header">
                        <div class="el-calendar__button-group">
                            <ul class="el-button-group">
                                <li>
                                    <span class="">
                                        <el-select v-model="value" class="m-2" :placeholder="years + '年'">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </span>
                                </li>
                                <li>
                                    <span class="">
                                        <el-select v-model="value1" class="m-2" :placeholder="mon + '月'">
                                            <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="el-calendar__body">
                        <table class="el-calendar-table" cellspacing="8">
                            <tbody>
                                <tr class="el-calendar-table__row" v-for="(item, index) in loopData">
                                    <td class="current" v-for="(itemd, indexd) in item.day" @click="PopUpBox(itemd)"
                                        :class="{ 'is-selected': day == itemd && mon == parseInt(value1) && years == parseInt(value) }">
                                        <div class="el-calendar-day">
                                            <span>{{ itemd }}</span>
                                            <div class="setting" :title="item.content[indexd]">{{ item.content[indexd] }}
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="popupbox" v-show="popupbox">
            <ul class="setworking">
                <li>
                    <span>日期备注</span>
                </li>
                <li @click="popupbox = false" style="cursor: pointer;">
                    <span class="iconfont icon-shanchu2"></span>
                </li>
            </ul>
            <div class="textarea">
                <el-input v-model="textareaValue" :rows="5" type="textarea" placeholder="请输入备注信息" />
            </div>
            <ul class="popupboxBtn">
                <!-- <li >
                    <el-button type="danger" link @click="important">重要</el-button>
                </li>
                <li style="margin-right: 220px;">
                    <el-button type="primary" link @click="unimportant">不重要</el-button>
                </li> -->
                <li>
                    <el-button @click="popupbox = false">取消</el-button>
                </li>
                <li>
                    <el-button type="primary" @click="affirme">确认</el-button>
                </li>
            </ul>
        </div>
        <div class="overlay" v-show="popupbox" @click="popupbox = false"></div>
    </div>
</template>

<style  lang="less">
.box_boxz {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);

    .workingday {
        height: 100%;
    }
}

.setting {
    margin-top: 5%;
    padding-left: 3%;
    height: 39.8px;
    color: #6e6e6e;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    font-size: 16px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    /* 确保遮罩层显示在其他元素之上 */
}



.el-button-group {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: flex-end;

}

.el-calendar__body {
    margin-top: 10px;

    .el-calendar-table {
        tbody {
            td {
                box-shadow: 0 1px 5px rgb(230, 230, 230);
            }
        }
    }
}

.el-select {
    margin-left: 20px;
}

.is-selected {
    color: #1890ff;
    border-top: 1px solid #1890ff !important;
}

.clickOne {
    background-color: var(--el-calendar-selected-bg-color);
    color: #1890ff;
}

.popupbox {
    z-index: 9999;
    box-shadow: 0 4px 12px #00000026;
    width: 38%;
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    background-color: white;
    transition: all 0.5s linear;
    border-radius: 10px;
}

.setworking {
    font-size: 18px;
    height: 40px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    margin-right: 5%;
    // border-bottom: 1px solid #eee7e7;
}

.textarea {
    margin: 5% 5%;

}

textarea:focus {
    outline: 1px solid #1890ff;
}

.text {
    resize: vertical;
    padding-top: 2%;
    padding-left: 2%;
}

.popupboxBtn {
    display: flex;
    justify-content: flex-end;
    margin-right: 5%;
    margin-bottom: 2%;

    li {
        &:nth-child(1) {
            margin-right: 2%;
        }
    }
}
</style>